<template name="rcVideo">
	<video src="{{src}}" autoplay muted="{{muted}}" class="webrtc-video-element {{#if me}}{{#unless screen}}video-flip{{/unless}}{{/if}}"></video>
</template>

<template name="videoCall">
	{{#if videoAvaliable}}
		{{#if videoActive}}
			<div class="webrtc-video {{#if overlay}}webrtc-video-overlay{{/if}}">
				<div class="main-video">
					{{> rcVideo src=mainVideoUrl muted="true" screen=screenShareEnabled me=($eq mainVideoUrl selfVideoUrl)}}
					<div class="background-transparent-darker">{{mainVideoUsername}}</div>
				</div>
				<div class="videos">
					{{#if selfVideoUrl}}
						<div class="video-item background-transparent-darker" data-username="$self">
							{{> rcVideo src=selfVideoUrl me=true screen=screenShareEnabled }}
							{{#unless audioAndVideoEnabled}}
								<div class="video-muted-overlay background-transparent-darker">
									{{#unless audioEnabled}}
										<button><i class="icon-mute"></i></button>
									{{/unless}}
									{{#unless videoEnabled}}
										<button><i class="icon-eye-off"></i></button>
									{{/unless}}
								</div>
							{{/unless}}
							<div class="background-transparent-darker">{{_ "you"}}</div>
						</div>
					{{/if}}
					{{#each remoteVideoItems}}
						<div class="video-item background-transparent-darker {{#unless connected}}state-overlay background-transparent-darker-before{{/unless}}" data-state-text="{{stateText}}" data-username="{{id}}">
							{{> rcVideo src=url screen=false }}
							<div class="background-transparent-darker">{{usernameByUserId id}}</div>
						</div>
					{{/each}}
				</div>
				<div class="rc-button__group rc-button__group--wrap rc-button__group--stretch">
					{{#if videoActive}}
						<button class="rc-button stop-call"><i class="icon-stop"></i>{{_ "Stop"}}</button>
						{{#if audioEnabled}}
							<button class="rc-button disable-audio" title="{{_ 'Mute'}}" aria-label="{{_ 'Mute'}}"><i class="icon-mute"></i></button>
						{{else}}
							<button class="rc-button enable-audio" title="{{_ 'Unmute'}}" aria-label="{{_ 'Unmute'}}"><i class="icon-mic"></i></button>
						{{/if}}
						{{#if videoEnabled}}
							<button class="rc-button disable-video"><i class="icon-eye-off"></i></button>
						{{else}}
							<button class="rc-button enable-video"><i class="icon-eye"></i></button>
						{{/if}}
						{{#if screenShareAvailable}}
							{{#if screenShareEnabled}}
								<button class="rc-button disable-screen-share"><i class="icon-desktop"></i></button>
							{{else}}
								<button class="rc-button enable-screen-share"><i class="icon-desktop"></i></button>
							{{/if}}
						{{/if}}
						{{#if overlayEnabled}}
							<button class="rc-button disable-overlay"><i class="icon-resize-small"></i></button>
						{{else}}
							<button class="rc-button enable-overlay"><i class="icon-resize-full-alt"></i></button>
						{{/if}}
					{{/if}}
				</div>
			</div>
		{{/if}}
	{{/if}}
</template>
